<template>
   <div>
      <button v-for="item in SearchTips" :key="item.id" class="TipsOne flex" @click="Search_(item.keyword)">
         <i class="el-icon-search"></i>
         <div class="name overflow">{{item.keyword}}</div>
      </button>
   </div>
</template>
<script>
import { mapActions, mapMutations, mapState } from 'vuex'
  export default 
  {
     name :'', 
     computed:{
        ...mapState('Music',['SearchTips'])
     },
     methods:{
      ...mapActions('Music',['getSearchResult']),
      ...mapMutations('Music',['SETKEYWORD']),
      Search_(keyword){
         this.getSearchResult(keyword)
      }
     }
     
  }
</script>
<style scoped lang='less'>
.TipsOne{
    width: 100%;
    height: 40px;
    justify-content: flex-start;
    padding: 0 10px;
    box-sizing: border-box;
    border-radius: 5px;
    flex-wrap: nowrap;
     color: white;
     i{
      margin-right: 5px;
     }
    .name{
      font-size: 18px;
    }
}
.TipsOne:hover{
   background: rgba(0, 0, 0, 0.5);
}
</style>